<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写single-spa</title>
</head>
<body>
    <a href="#/app1">应用1</a>
    <a href="#/app2">应用2</a>

    <script src='/lib/umd/single-spa.js' ></script>
    <script>
        // 参数分别是:
        // appName: 当前注册应用的名字
        // loadApp: 加载函数(必须返回的是promise)，返回的结果必须包含bootstrap、mount和 unmount做为接入协议
        // activityWhen: 满足条件时调用loadApp方法
        // customProps:自定义属性可用于父子应用通信

        // singleSpa.registerApplication 默认会加载应用
        // singleSpa.start 会挂载应用
        singleSpa.registerApplication(
            'app1',
            async()=>{
                console.log( '加载时执行1')
                // 这个函数需要返回结果
                return {
                    bootstrap:async()=>{
                        console.log('应用启动1');
                    },
                    mount:async()=>{
                        console.log('应用挂载1');
                    },
                    unmount:async()=>{
                        console.log('应用卸载1')
                    }
                }
            }
            ,
            location => location.hash.startsWith('#/app1'),  
            { store: { name: 'Ikki' } }
        )
        singleSpa.registerApplication(
            'app2',
            
            async()=>{
                console.log( '加载时执行2')
                // 这个函数需要返回结果
                return {
                    bootstrap:[async()=>{
                        console.log('应用启动2');
                    }],
                    mount:async()=>{
                        console.log('应用挂载2');
                    },
                    unmount:async()=>{
                        console.log('应用卸载2')
                    }
                }
            }
            ,
            location => location.hash.startsWith('#/app2'),  
            { store: { name: 'hui' } }
        )
        singleSpa.start(); //启动这个应用
        

        
    </script>
</body>
</html>